<template>
  <basic-container>
    <div class="data-icons-wrapper" v-if="!authority.includes('employee')">
      <avue-data-icons :option="option" v-if="!authority.includes('employee')"></avue-data-icons>
    </div>

    <div style="display: flex; " v-if="!authority.includes('employee')">
      <!-- 考勤统计 attendanceStatistics -->
      <div class="chart-card" style="flex: 1; margin-right: 20px;">
        <div id="attendanceStatistics" style="flex: 1; height: 500px; margin-right: 20px;"></div>
      </div>
      <div class="chart-card" style="flex: 1; margin-right: 20px;">
        <!-- 日收支统计 dayIncomeExpenditure -->
        <div id="dayIncomeExpenditure" style="flex: 1; height: 500px; margin-right: 20px;"></div>
      </div>
    </div>

    <div style="display: flex; justify-content: space-between; margin: 70px 0">
      <div class="chart-card" style="flex: 1; margin-right: 20px;">
        <!-- 月评分的折线图 monthsScores -->
        <div id="monthsScores" style="flex: 1; height: 500px; margin-right: 20px;"></div>
      </div>
      <!-- 任务统计-->
      <div class="chart-card" style="flex: 1; margin-right: 20px;">
        <div id="taskCounts" style="flex: 1; height: 500px; margin-right: 20px;"></div>
      </div>
    </div>
    <div style="display: flex; justify-content: space-between; margin: 70px 0" v-if="!authority.includes('employee')">
      <!-- 月收支统计 monthIncomeExpenditure -->
      <div class="chart-card" style="flex: 1; margin-right: 20px;">
        <div id="monthIncomeExpenditure" style="flex: 1; height: 500px; margin-right: 20px;"></div>
      </div>
      <!-- 日均人效-->
      <div class="chart-card" style="flex: 1; margin-right: 20px;">
        <div id="dailyHumanEfficiency" style="flex: 1; height: 500px; margin-right: 20px;"></div>
      </div>
      <!-- 月均人效-->
      <div class="chart-card" style="flex: 1; margin-right: 20px;">
        <div id="monthlyHumanEfficiency" style="flex: 1; height: 500px; margin-right: 20px;"></div>
      </div>
    </div>
  </basic-container>

</template>

<script>
import * as echarts from 'echarts';

import { mapGetters } from 'vuex';
import thirdRegister from '@/components/third-register/main.vue';
import {
  getDataCounts,
  getAreaMonthsScores,
  getMonthIncomeExpenditureStatistics,
  getDayIncomeExpenditureStatistics, getTaskStatistics, getAttendanceStatistics,
  getDailyHumanEfficiency,
  getMonthlyHumanEfficiency
} from '@/api/restaurant/dashboard';
import BasicContainer from '@/components/basic-container/main.vue';
import { View } from '@element-plus/icons-vue';

export default {
  name: 'wel',
  components: {
    View,
    BasicContainer,
    thirdRegister
  },
  data() {
    return {
      option: {
        span: 4,
        data: []
      },
      rotateData: [],
      countIncome: [], // 饼图数据
      authority: 'employee'
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    this.$nextTick(() => {
      this.init();
    });
  },
  mounted() {
    this.$el.querySelectorAll('.chart-card').forEach((el, index) => {
      setTimeout(() => {
        el.style.opacity = '1';
        el.style.transform = 'translateY(0)';
      }, index * 150);
    });
  },
  methods: {
    async init() {
      try {
        this.authority = this.userInfo.authority;
        const areaMonthsScores = await getAreaMonthsScores();
        const areaScores = areaMonthsScores.data.data;
        this.renderChartMonthsScores(areaScores.series, areaScores.categories, areaScores.title);

        const taskStatistics = await getTaskStatistics();
        const taskStatisticsData = taskStatistics.data.data;
        this.renderChartTaskStatistics(taskStatisticsData.series, taskStatisticsData.categories, taskStatisticsData.title);

        if (!this.authority.includes('employee')) {

          const dataCounts = await getDataCounts();
          this.option.data = dataCounts.data.data;

          const dayIncomeExpenditureStatistics = await getDayIncomeExpenditureStatistics();
          const dayIncomeExpenditureStatisticsData = dayIncomeExpenditureStatistics.data.data;
          this.renderChartDayIncomeExpenditure(dayIncomeExpenditureStatisticsData.series, dayIncomeExpenditureStatisticsData.categories, dayIncomeExpenditureStatisticsData.title);

          const monthIncomeExpenditureStatistics = await getMonthIncomeExpenditureStatistics();
          const monthIncomeExpenditureStatisticsData = monthIncomeExpenditureStatistics.data.data;
          this.renderChartMonthIncomeExpenditure(monthIncomeExpenditureStatisticsData.series, monthIncomeExpenditureStatisticsData.categories, monthIncomeExpenditureStatisticsData.title);

          const attendanceStatistics = await getAttendanceStatistics();
          const attendanceStatisticsData = attendanceStatistics.data.data;
          this.renderChartAttendanceStatistics(attendanceStatisticsData.series, attendanceStatisticsData.categories, attendanceStatisticsData.title);

          const dailyHumanEfficiency = await getDailyHumanEfficiency();
          const dailyHumanEfficiencyData = dailyHumanEfficiency.data.data;
          this.renderChartDailyHumanEfficiency(dailyHumanEfficiencyData.series, dailyHumanEfficiencyData.categories, dailyHumanEfficiencyData.title);

          const monthlyHumanEfficiency = await getMonthlyHumanEfficiency();
          const monthlyHumanEfficiencyData = monthlyHumanEfficiency.data.data;
          this.renderChartMonthlyHumanEfficiency(monthlyHumanEfficiencyData.series, monthlyHumanEfficiencyData.categories, monthlyHumanEfficiencyData.title);
        }
      } catch (error) {
        console.error('获取数据失败', error);
      }
    },
    // 日收支统计
    renderChartDayIncomeExpenditure(seriesData, months, title) {
      const chartDom = document.getElementById('dayIncomeExpenditure');
      if (!chartDom) {
        console.error('找不到折线图 DOM');
        return;
      }
      const myChart = echarts.init(chartDom);
      const option = {
        color: ['#4B98FE', '#00D05E', '#FFAC00', '#FB6A67', '#957BFE', '#00B9FE', '#FE871B', '#00C8B0', '#F674D6'],
        title: {  // 标题
          text: title,
          left: 'left'
        },
        tooltip: {  // 提示框
          trigger: 'axis'
        },
        legend: {  // 图例
          top: 40,  // 调整 legend 位置避免与标题重叠
          orient: 'horizontal',  // 设置图例为水平布局
          itemWidth: 14,  // 控制每个图例项的宽度
          formatter: function(name) {
            // 控制每行图例显示的字数，长图例自动换行
            return name.length > 5 ? name.slice(0, 5) + '\n' + name.slice(5) : name;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top: 90,  // 增加 grid top 以避免与 legend 重叠
          bottom: '10%',
          containLabel: true  // 确保坐标轴标签在 grid 区域内
        },
        toolbox: {  // 工具栏
          feature: {  // 工具栏的每个按钮
            saveAsImage: {  // 保存图片
              title: title
            }
          }
        },
        xAxis: {
          type: 'category',  // 设置为类目轴
          boundaryGap: false,  // 取消刻度之间的间隔
          data: months  // 设置类目数据
        },
        yAxis: {
          type: 'value',
          offset: 30 // 将 Y 轴向右偏移 20 像素
        },
        series: seriesData.map(item => {
          return {
            name: item.name,
            // 如果 name 为 收入 支出 则 type 为 bar 否则为 line
            type: item.name === '收入' || item.name === '支出' ? 'bar' : 'line',
            data: item.data,
            barWidth: '20',
            smooth: true // 平滑线条
          };
        })
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    // 月收支统计
    renderChartMonthIncomeExpenditure(seriesData, months, title) {
      const chartDom = document.getElementById('monthIncomeExpenditure');
      if (!chartDom) {
        console.error('找不到折线图 DOM');
        return;
      }
      const myChart = echarts.init(chartDom);
      const option = {
        color: ['#4B98FE', '#00D05E', '#FFAC00', '#FB6A67', '#957BFE', '#00B9FE', '#FE871B', '#00C8B0', '#F674D6'],
        title: {  // 标题
          text: title,
          left: 'left'
        },
        tooltip: {  // 提示框
          trigger: 'axis'
        },
        legend: {  // 图例
          top: 40,  // 调整 legend 位置避免与标题重叠
          orient: 'horizontal',  // 设置图例为水平布局
          itemWidth: 14,  // 控制每个图例项的宽度
          formatter: function(name) {
            // 控制每行图例显示的字数，长图例自动换行
            return name.length > 5 ? name.slice(0, 5) + '\n' + name.slice(5) : name;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top: 90,  // 增加 grid top 以避免与 legend 重叠
          bottom: '10%',
          containLabel: true
        },
        toolbox: {  // 工具栏
          feature: {  // 工具栏的每个按钮
            saveAsImage: {  // 保存图片
              title: title
            }
          }
        },
        xAxis: {
          type: 'category',  // 设置为类目轴
          boundaryGap: false,  // 取消刻度之间的间隔
          data: months  // 设置类目数据
        },
        yAxis: {
          type: 'value'
        },
        series: seriesData.map(score => ({
          ...score,
          type: 'line',  // 设置为折线图
          // stack: 'Total',  // 堆叠
          // areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          smooth: true // 平滑线条
        }))
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    // 月评分的折线图
    renderChartMonthsScores(seriesData, months, title) {
      const chartDom = document.getElementById('monthsScores');
      if (!chartDom) {
        console.error('找不到折线图 DOM');
        return;
      }
      const myChart = echarts.init(chartDom);
      const option = {
        color: ['#4B98FE', '#00D05E', '#FFAC00', '#FB6A67', '#957BFE', '#00B9FE', '#FE871B', '#00C8B0', '#F674D6'],
        title: {  // 标题
          text: title,
          left: 'left'
        },
        tooltip: {  // 提示框
          trigger: 'axis'
        },
        legend: {  // 图例
          top: 40,  // 调整 legend 位置避免与标题重叠
          orient: 'horizontal',  // 设置图例为水平布局
          itemWidth: 14,  // 控制每个图例项的宽度
          formatter: function(name) {
            // 控制每行图例显示的字数，长图例自动换行
            return name.length > 5 ? name.slice(0, 5) + '\n' + name.slice(5) : name;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top: 90,  // 增加 grid top 以避免与 legend 重叠
          bottom: '10%',
          containLabel: true
        },
        toolbox: {  // 工具栏
          feature: {  // 工具栏的每个按钮
            saveAsImage: {  // 保存图片
              title: title
            }
          }
        },
        xAxis: {
          type: 'category',  // 设置为类目轴
          boundaryGap: false,  // 取消刻度之间的间隔
          data: months  // 设置类目数据
        },
        yAxis: {
          type: 'value'
        },
        series: seriesData.map(score => ({
          ...score,
          type: 'line',  // 设置为折线图
          // stack: 'Total',  // 堆叠
          // areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          smooth: true // 平滑线条
        }))
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    // 任务统计
    renderChartTaskStatistics(seriesData, months, title) {

      const chartDom = document.getElementById('taskCounts');
      if (!chartDom) {
        console.error('找不到折线图 DOM');
        return;
      }
      const myChart = echarts.init(chartDom);
      const option = {
        color: ['#4B98FE', '#00D05E', '#FFAC00', '#FB6A67', '#957BFE', '#00B9FE', '#FE871B', '#00C8B0', '#F674D6'],
        title: {  // 标题
          text: title,
          left: 'left'
        },
        tooltip: {  // 提示框
          trigger: 'axis'
        },
        legend: {  // 图例
          top: 40,  // 调整 legend 位置避免与标题重叠
          orient: 'horizontal',  // 设置图例为水平布局
          itemWidth: 14,  // 控制每个图例项的宽度
          formatter: function(name) {
            // 控制每行图例显示的字数，长图例自动换行
            return name.length > 5 ? name.slice(0, 5) + '\n' + name.slice(5) : name;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top: 90,  // 增加 grid top 以避免与 legend 重叠
          bottom: '10%',
          containLabel: true
        },
        toolbox: {  // 工具栏
          feature: {  // 工具栏的每个按钮
            saveAsImage: {  // 保存图片
              title: title
            }
          }
        },
        xAxis: {
          type: 'category',  // 设置为类目轴
          boundaryGap: false,  // 取消刻度之间的间隔
          data: months  // 设置类目数据
        },
        yAxis: {
          type: 'value'
        },
        series: seriesData.map(score => ({
          ...score,
          type: 'line',  // 设置为折线图
          // stack: 'Total',  // 堆叠
          // areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          smooth: true // 平滑线条
        }))
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    // 考勤统计
    renderChartAttendanceStatistics(seriesData, months, title) {

      const chartDom = document.getElementById('attendanceStatistics');
      if (!chartDom) {
        console.error('找不到折线图 DOM');
        return;
      }
      const myChart = echarts.init(chartDom);
      const option = {
        color: ['#4B98FE', '#00D05E', '#FFAC00', '#FB6A67', '#957BFE', '#00B9FE', '#FE871B', '#00C8B0', '#F674D6'],
        title: {  // 标题
          text: title,
          left: 'left'
        },
        tooltip: {  // 提示框
          trigger: 'axis'
        },
        legend: {  // 图例
          top: 40,  // 调整 legend 位置避免与标题重叠
          orient: 'horizontal',  // 设置图例为水平布局
          itemWidth: 14,  // 控制每个图例项的宽度
          formatter: function(name) {
            // 控制每行图例显示的字数，长图例自动换行
            return name.length > 5 ? name.slice(0, 5) + '\n' + name.slice(5) : name;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top: 90,  // 增加 grid top 以避免与 legend 重叠
          bottom: '10%',
          containLabel: true
        },
        toolbox: {  // 工具栏
          feature: {  // 工具栏的每个按钮
            saveAsImage: {  // 保存图片
              title: title
            }
          }
        },
        xAxis: {
          type: 'category',  // 设置为类目轴
          boundaryGap: false,  // 取消刻度之间的间隔
          data: months  // 设置类目数据
        },
        yAxis: {
          type: 'value'
        },
        series: seriesData.map(score => ({
          ...score,
          type: 'bar',  // 设置为折线图
          stack: 'Total',  // 堆叠
          barWidth: '20',

          // areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          smooth: true // 平滑线条
        }))
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },

    // 日均人效
    renderChartDailyHumanEfficiency(seriesData, months, title) {

      const chartDom = document.getElementById('dailyHumanEfficiency');
      if (!chartDom) {
        console.error('找不到折线图 DOM');
        return;
      }
      const myChart = echarts.init(chartDom);
      const option = {
        color: ['#4B98FE', '#00D05E', '#FFAC00', '#FB6A67', '#957BFE', '#00B9FE', '#FE871B', '#00C8B0', '#F674D6'],
        title: {  // 标题
          text: title,
          left: 'left'
        },
        tooltip: {  // 提示框
          trigger: 'axis'
        },
        legend: {  // 图例
          top: 40,  // 调整 legend 位置避免与标题重叠
          orient: 'horizontal',  // 设置图例为水平布局
          itemWidth: 14,  // 控制每个图例项的宽度
          formatter: function(name) {
            // 控制每行图例显示的字数，长图例自动换行
            return name.length > 5 ? name.slice(0, 5) + '\n' + name.slice(5) : name;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top: 90,  // 增加 grid top 以避免与 legend 重叠
          bottom: '10%',
          containLabel: true
        },
        toolbox: {  // 工具栏
          feature: {  // 工具栏的每个按钮
            saveAsImage: {  // 保存图片
              title: title
            }
          }
        },
        xAxis: {
          type: 'category',  // 设置为类目轴
          boundaryGap: false,  // 取消刻度之间的间隔
          data: months  // 设置类目数据
        },
        yAxis: {
          type: 'value',
          offset: 30 // 将 Y 轴向右偏移 20 像素
        },
        series: seriesData.map(
          item => ({
            type: 'line',  // 设置为折线图
            ...item,
            // stack: 'Total',  // 堆叠
            // areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            smooth: true // 平滑线条
          })
        )
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    // 月均人效
    renderChartMonthlyHumanEfficiency(seriesData, months, title) {

      const chartDom = document.getElementById('monthlyHumanEfficiency');
      if (!chartDom) {
        console.error('找不到折线图 DOM');
        return;
      }
      const myChart = echarts.init(chartDom);
      const option = {
        color: ['#4B98FE', '#00D05E', '#FFAC00', '#FB6A67', '#957BFE', '#00B9FE', '#FE871B', '#00C8B0', '#F674D6'],
        title: {  // 标题
          text: title,
          left: 'left'
        },
        tooltip: {  // 提示框
          trigger: 'axis'
        },
        legend: {  // 图例
          top: 40,  // 调整 legend 位置避免与标题重叠
          orient: 'horizontal',  // 设置图例为水平布局
          itemWidth: 14,  // 控制每个图例项的宽度
          formatter: function(name) {
            // 控制每行图例显示的字数，长图例自动换行
            return name.length > 5 ? name.slice(0, 5) + '\n' + name.slice(5) : name;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top: 90,  // 增加 grid top 以避免与 legend 重叠
          bottom: '10%',
          containLabel: true
        },
        toolbox: {  // 工具栏
          feature: {  // 工具栏的每个按钮
            saveAsImage: {  // 保存图片
              title: title
            }
          }
        },
        xAxis: {
          type: 'category',  // 设置为类目轴
          boundaryGap: false,  // 取消刻度之间的间隔
          data: months  // 设置类目数据
        },
        yAxis: {
          type: 'value',
          offset: 30 // 将 Y 轴向右偏移 20 像素
        },
        series: seriesData.map(
          item => ({
            type: 'line',  // 设置为折线图

            ...item,
            // stack: 'Total',  // 堆叠
            // areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            smooth: true // 平滑线条
          })
        )
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }

  }
};
</script>

<style scoped>
/* 容器渐变背景 */
.basic-container {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.data-icons-wrapper {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin: 20px 0;
  transition: all 0.3s ease;
}

/* 增加悬停提升效果 */
.data-icons-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* 图标容器网格布局优化 */
.avue-data-icons__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}

/* 单个数据项样式强化 */
.avue-data-icons__item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

/* 图标数值强调样式 */
.avue-data-icons__count {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1890ff;
  margin: 8px 0;
}

/* 图标标签样式优化 */
.avue-data-icons__label {
  color: #666;
  font-size: 0.875rem;
}

/* 响应式布局增强 */
@media (max-width: 992px) {
  .avue-data-icons__container {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .avue-data-icons__item {
    padding: 8px;
  }
}

/* 图表卡片样式 */
.chart-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  transition: all 0.3s ease;
  margin: 10px 0;
}

/* 悬停放大效果 */
.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* 图表容器统一高度 */
#attendanceStatistics,
#dayIncomeExpenditure,
#monthsScores,
#taskCounts,
#monthIncomeExpenditure,
#dailyHumanEfficiency,
#monthlyHumanEfficiency {
  min-height: 450px;
}

/* 响应式布局优化 */
@media (max-width: 1400px) {
  .chart-card {
    margin-right: 10px !important;
  }
}

@media (max-width: 768px) {
  .chart-card {
    flex: 1 1 100%;
    margin-right: 0 !important;
  }
}
</style>


